小程序•小故事(2)——代码片段

《小程序•小故事》第二期同大家分享小程序开发者工具「代码片段」的故事。

背景

当开发者在交流技术问题的时候，是否遇到过互相交流代码不方便的问题。比如：

• 复现 Bug 的时候需要一个可运行的复现问题的 demo；

• 展示组件 API 正确写法的时候也希望直接传一个 demo ；

• 如果想发送代码还得先压缩打包，再上传到云盘或者加微信传送，非常不方便；

……

 Linux 之父 Linus Torvalds 也说过一句著名的话：

Talk is cheap, show me the code。

对于程序员而言，代码才是最美的语言。

那么，小程序能否也提供方便好用的代码分享能力呢？

为了解决这个问题，我们在开发者工具中推出了一种新能力：代码片段。

代码片段的介绍

代码片段是一种可分享的小项目，既可以用来分享小程序、小游戏开发经验，也可以用来复现问题和 Bug。他们和普通项目一样可以直接运行，主要区别在于代码片段体积小且可以被分享。

代码片段分享的时候会得到一个分享链接，他人拿到这个链接就可以在小程序开发者工具中导入这个代码片段并运行起来。此外，把这个分享链接嵌入到网页中，其他开发者点击链接就可以自动打开工具导入代码片段。

如何编辑代码片段

编辑代码片段前，需要新建一个代码片段或者使用他人分享出来的代码片段。

新建代码片段的时候，需要做以下步骤：

Step1：填写代码片段的名称（必填）。建议开发者起个通俗易懂、让人快速明白的名称。

Step2：填写代码片段的存放目录（选填）。若不填写会默认存放到临时目录。

Step3：填写小程序的 AppID（选填）。填写AppID后，开发者可在手机上预览代码片段、启用远程调试，这在开发者希望展示真机效果的时候尤为重要。若不填写就会无法使用一些依赖 AppID 的工具功能和小程序的 API，如小程序内嵌业务域名等能力。

Step4：填写选择代码片段的创建模板（必填），开发者可以选择小程序、小游戏或插件模板。

代码片段和普通项目有如下区别：

1.编辑主窗口：编辑代码片段的主窗口和普通项目基本一致，但主要区别在于代码片段的主窗口没有上传代码、申请自动化测试、腾讯云集成等，需要与项目绑定的功能。

2.快速启动模版：代码片段的快速启动模板是个最精简的可运行模板，与新建项目不一样。

如何分享代码片段

分享代码片段的入口在工具栏右侧：

分享代码片段时，需要填写以下几项信息：

1.项目描述，用简要的话语告诉其他开发者这个代码片段的主要功能。若需要更详细的描述功能或使用方法，建议在代码目录下新建一个 README.md 文件进行更详细的描述。

2.导入时是否需要 AppID，用来提示其他开发者这个代码片段是否用到了依赖 AppID 的功能。

3.最低的基础库版本，用来指定代码片段运行的最低的基础库版本，这样将保证导入的开发者不会用比指定版本更低的版本运行这个代码片段。

分享完成后将得到一个分享链接，开发者可以拿这个链接在工具中导入。

此外，为了让大家有更加快捷方便的分享体验，小程序开发者工具还添加了点击链接自动导入的能力。当这个链接被制作为 HTML 链接的时候，如 <a href="这里填入分享链接"> 。开发者点击分享链接会自动打开开发者工具导入代码片段的界面，工具会自动填入分享链接并拉取分享的信息，开发者只需点击导入就可以完成一键导入。

如何导入他人的代码片段

当使用代码片段的链接时，就可以在开发者工具中导入。

在导入的页面中输入链接就可以展示代码片段的名称和描述，在导入之前开发者还可以修改名称、选择存放的目录以及填入 AppID。

代码片段的使用场景

场景1:

在大家互相交流技术问题的时候，可以带上一个代码片段，让大家快速复现你的问题给你提供解答；

场景2:

在发表小程序开发经验的文章中带上代码片段的分享链接，可以更好的让其他开发者理解你想表达的意思；

场景3:

在开源小程序项目的介绍上可以用代码片段展示使用示例。

如果在微信开发者社区发帖或评论的时候，可以在编辑器上选择插入超链接，填入代码片段的分享链接，即可成为一个可点击的链接。

注意事项

1. 目前小程序、插件代码片段的代码包大小限制在 100KB，小游戏代码片段的代码包大小限制在 200KB。

2. 插件能力依赖 AppID，所以新建插件代码片段的时候需要填入 AppID。

3. 有 AppID 的时候支持使用远程调试，使用方法和普通项目一致。

4. 代码片段临时目录存放位置： 

• Windows 下在 %LocalAppData%/微信web开发者工具/User Data/WeappMiniCode

• macOS 下在 /Library/Application Support/微信web开发者工具/WeappMiniCode

- END -

第一期回顾：小程序•小故事(1)——分包加载

如果大家有想了解的小程序相关能力的故事，欢迎在评论区留言，我们后续会考虑将这些能力背后的故事分期分享给大家。